<template>
	<view class="p-3">
		<view class="flex align-center">
			<image class="user-avatar rounded-circle" src="/static/demo/datapic/33.jpg" mode="aspectFill"></image>
			<view class="flex-1 flex align-center pl-2" hover-class="bg-hover-light">
				<view class="flex flex-column">
					<text class="text-dark font-md">{{user.username}}</text>
					<view class="flex align-center text-muted">总帖子 1 今日帖子 0</view>
				</view>
				<view class="iconfont icon-jinru text-muted ml-auto" style="font-size: 40rpx;"></view>
			</view>
		</view>
		<view class="flex align-center my-5 font-md">
			<view class="flex-1 flex flex-column align-center justify-center">
				<text class="text-dark">1</text>
				<text class="text-muted">帖子</text>
			</view>
			<view class="flex-1 flex flex-column align-center justify-center">
				<text class="text-dark">1</text>
				<text class="text-muted">动态</text>
			</view>
			<view class="flex-1 flex flex-column align-center justify-center">
				<text class="text-dark">1</text>
				<text class="text-muted">评论</text>
			</view>
			<view class="flex-1 flex flex-column align-center justify-center">
				<text class="text-dark">1</text>
				<text class="text-muted">粉丝</text>
			</view>
		</view>
		<!-- banner -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="height: 170rpx;">
			<swiper-item>
				<image class="banner-img" src="/static/demo/demo20.jpg" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="profile-menu py-4">
			<uni-list-item :title="item.name" showExtraIcon v-for="(item,index) in profileMenus" :key="index">
				<text slot="icon" class="iconfont" :class="item.iconId"></text>
			</uni-list-item>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue'
	export default {
		components:{
			uniListItem
		},
		data() {
			return {
				profileMenus:[
					{name:'浏览历史',iconId:'icon-liulan'},
					{name:'社区认证',iconId:'icon-huiyuanvip'},
					{name:'审核帖子',iconId:'icon-icon_im_keyboard'}
				]
			};
		},
		computed:{
			...mapGetters(['user'])
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url:'/pages/setting/setting'
			})
		}
	}
</script>

<style lang="scss">
.user-avatar {
	width: 104rpx;
	height: 104rpx;
}
.banner-img {
	width: 100%;
	height: 170rpx;
	border-radius: 20rpx;
}
</style>
